<template>
  <div>
    <!-- 顶部导航栏 -->

    <!-- 如果需要分页器 -->
    <!-- <div class="swiper-pagination"></div>
      </div>
    </div>-->
    <div class="index-mobile-head">
      <div class="pc-head">
        <div class="pc-head-position">
          <div class="pc-head-body">
            <!-- <img
              src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/logo02.png"
              class="pc-head-logo"
            />-->
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homem/logo1.png" class="pc-head-logo" alt />

            <ul class="pc-head-menu">
              <li v-for="(item,key) in menu" :key="key" class="pc-head-menu-item" :ref="'menu'+key">
                <router-link :to="item.url" @click.native="changeRouter(key)">{{item.name}}</router-link>
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/HOt.png" alt="">

              </li>
              <li v-if="menu_show" class="pc-head-line" :style="menu_show ? setLineStyle() : ''"></li>
            </ul>
          </div>
        </div>
        <div class="index-banner-box">
          <div :class="['toDown',todown?'toDown_active':'']"></div>
          <div style="height:80px;"></div>
          <div class="index-banners" @mouseenter="on_top_enter" @mouseleave="on_top_leave" v-if="banner.pc.length">
            <!-- <div :class="['banner_zzc', banner_active ?'banner_active':'']"></div> -->
            <swiper :options="swiperOption" ref="mySwiper_banner" @slideChangeTransitionEnd="slideChangeTransitionEnd">
              <!-- slides -->
              <swiper-slide v-for="(item,key) in banner.pc" :key="key">
                <img :src="item.src" class="banner-img-src" />
              </swiper-slide>
            </swiper>
          </div>
          <div :class="['index-right',index_right?'index_right_active':'']" ref="indexpchead">
            <div class="banner-slide-position">
              <span v-for="(item,key) in this.banner.pc" :key="key" :style="key == banner_index ? 'height:15px;' : ''" @click="changeSlide(key)"></span>
            </div>
          </div>
          <div class="index-banner-silde">
            <div @click="bannerChange(1)">
              <!--               <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/jt01-2.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/jt05.png" alt />
            </div>
            <div @click="bannerChange(2)">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/jt01-2.png" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 我们能做什么 -->
    <div :class="['home_weCan',wecan_flag?'home_wecan_T':'']">
      <div :class="['weCan_top',we_t_flag?'we_t_active':'']">
        <h2>我们能做什么</h2>
        <p>我们以商业落地为基准，为您提供以下服务</p>
      </div>
      <div class="wContent">
        <ul :class="['one',wContentone?'wContentone':'']" @mouseenter="changebg(1)">
          <li>
            <div class="wc_top">
              <div class="pic">
                <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/1.png" alt />
                <!-- <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/27.png" alt /> -->
                <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/1_01.png" alt />
              </div>
              <h5>品牌网站建设</h5>
              <span>Website Building</span>
            </div>
            <ul class="wc_bottom">
              <li>+ 原创设计企业型</li>
              <li>+ 电子商务营销型</li>
              <li>+ 行业门户平台型</li>
              <li>+ 功能需求定制型</li>
            </ul>
          </li>
        </ul>
        <ul :class="['two',wContenttwo?'wContenttwo':'']" @mouseenter="changebg(2)">
          <li>
            <div class="wc_top">
              <div class="pic">
                <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/2.png" alt />
                <!-- <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/wx01-2.png" alt /> -->
                <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/2_02.png" alt />
              </div>
              <h5>微信定制开发</h5>
              <span>WeChat Custom Development</span>
              <div class="hot">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/HOt.png" alt="">
              </div>
            </div>
            <ul class="wc_bottom">
              <li>+ 小程序开发</li>
              <li>+ 公众号开发</li>
              <li>+ 微信商城系统</li>
              <li>+ 微活动定制</li>
            </ul>
          </li>
        </ul>
        <ul :class="['three',wContentthree?'wContentthree':'']" @mouseenter="changebg(3)">
          <li>
            <div class="wc_top">
              <!-- <image src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/wzjs01-2.png"></image> -->
              <div class="pic">
                <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/3.png" alt />
                <!-- <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/29.png" alt /> -->
                <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/3_03.png" alt />
              </div>
              <h5>App定制开发</h5>
              <span>APP Custom Development</span>
            </div>
            <ul class="wc_bottom">
              <li>+ APP原生开发</li>
              <li>+ APP混合开发</li>
              <li>+ HTML5开发</li>
            </ul>
          </li>
        </ul>
        <ul :class="['four',wContentfour?'wContentfour':'']" @mouseenter="changebg(4)">
          <li>
            <div class="wc_top">
              <!-- <image src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/wzjs01-2.png"></image> -->
              <div class="pic">
                <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/4.png" alt />
                <!-- <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/30.png" alt /> -->
                <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/4_04.png" alt />
              </div>
              <h5>VR全景营销</h5>
              <span>Virtual Panorama</span>
            </div>
            <ul class="wc_bottom">
              <li>+ 720°全景定制</li>
              <li>+ 360°环绕拍摄</li>
              <li>+ VR智慧展馆</li>
              <li>+ Web 3D开发</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- 我们能做什么手机 -->
    <div class="mCan">
      <div class="mcan_top">
        <h2>我们能做什么</h2>
        <p>我们以商业落地为基准，为您提供以下服务</p>
      </div>
      <div class="mcan_bot">
        <!-- 移动端效果 -->
        <div class="mContent">
          <div class="wzjs" @click="toser(1)">
            <div class="wzjs_pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/000.png" alt />
            </div>
            <div class="wzjs_right">
              <div class="wzjs_right_name">
                <span>品牌网站建设</span>
                <span>Website Building</span>
              </div>
              <ul>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>原创设计企业型</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>电子商务营销型</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>行业门户平台型</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>功能需求定制型</span>
                </li>
              </ul>
              <div class="jt">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jt01-2.png" alt />
              </div>
            </div>
          </div>
          <!-- 微信定制开发 -->
          <div class="wxdz" @click="toser(2)">
            <div class="wxdz_pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/app01.png" alt />
            </div>
            <div class="wxdz_right">
              <div class="wxdz_right_name">
                <span>
                  微信定制开发
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/hot01-2.png" alt />
                </span>
                <span>WeChat Custom Development</span>
              </div>
              <ul>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>小程序开发</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>公众号开发</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>微信商城系统</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>微活动策划</span>
                </li>
              </ul>
              <div class="jt">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jt01-2.png" alt />
              </div>
            </div>
          </div>
          <!-- app定制开发 -->
          <div class="app" @click="toser(3)">
            <div class="app_pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/111.png" alt />
            </div>
            <div class="app_right">
              <div class="app_right_name">
                <span>APP定制开发</span>
                <span>WeChat Custom Development</span>
              </div>
              <ul>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>APP原生开发</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>APP混合开发</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>WebApp开发</span>
                </li>
              </ul>
              <div class="jt">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jt01-2.png" alt />
              </div>
            </div>
          </div>
          <!-- vr全景营销 -->
          <div class="vr" @click="toser(4)">
            <div class="vr_pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/333.png" alt />
            </div>
            <div class="vr_right">
              <div class="vr_right_name">
                <span>VR全景营销</span>
                <span>Virtual Panorama</span>
              </div>
              <ul>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>720°全景定制</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>360°环绕拍摄</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>VR智慧展馆</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>Web 3D开发</span>
                </li>
              </ul>
              <div class="jt">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jt01-2.png" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 为什么选择我们 -->
    <div :class="['choose',choose_flag?'choose_active':'']">
      <div class="choose_top">
        <h2>为什么选择我们</h2>
        <p>我们是，怀揣艺术心态的开发团队</p>
      </div>
      <!-- 各项优势 -->
      <div :class="['advantage',choose_o_flag?'advantage_active':'']">
        <div class="advantage_content container clearfix">
          <div class="pic">
            <div :class="['one',pic_b_flag?'pic_b_ac':'']">
              <div class="one_t">
                <div class="pic_lia" style=" width:27px; ">
                  <img class="on" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/01_01.png" alt />
                  <img class="tw" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/01.png" alt />
                </div>
                <!-- <div class="pic_p"></div> -->
                <p>免费专属服务</p>
                <div class="a_line"></div>
              </div>
              <span>资深产品经理1对1进行全面需求分析并制定解决方案</span>
            </div>
            <div :class="['two',pic_b_flag?'pic_b_ac':'']">
              <div class="one_t">
                <div class="pic_lia" style=" width:29px;height:30px ">
                  <img class="on" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/03_03.png" alt />
                  <img class="tw" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/03.png" alt />
                </div>
                <div class="pic_p"></div>
                <p>高标准开发流程</p>

                <div class="a_line"></div>
              </div>
              <span>项目开发严格按照产品研发标准进行</span>

            </div>
            <div :class="['three',pic_b_flag?'pic_b_ac':'']">
              <div class="one_t">
                <div class="pic_lia" style=" width:29px;height:34px">
                  <img class="on" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/05_05.png" alt />
                  <img class="tw" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/05.png" alt />
                </div>
                <div class="pic_p"></div>
                <p>只为更好的用户体验</p>
                <div class="a_line"></div>
              </div>
              <span>定制交互设计，结合用户习惯及页面美感来设计交互</span>
            </div>
            <div :class="['four',pic_b_flag?'pic_b_ac':'']">
              <div class="one_t">
                <div class="pic_lia" style=" width:29px">
                  <img class="on" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/02_02.png" alt />
                  <img class="tw" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/02.png" alt />
                </div>
                <div class="pic_p"></div>
                <p>高效团队协作</p>
                <div class="a_line"></div>
              </div>
              <span>公司成立之初到至今，核心团队从未发生变化,高效早已经是我们的标签</span>
            </div>
            <div :class="['five',pic_b_flag?'pic_b_ac':'']">
              <div class="one_t">
                <div class="pic_lia" style=" width:30px;height:30px">
                  <img class="on" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/04_04.png" alt />
                  <img class="tw" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/04.png" alt />
                </div>
                <div class="pic_p"></div>
                <!-- <p>完善的服务体系</p> -->
                <p>坚持原创设计理念</p>

                <div class="a_line"></div>

              </div>
              <span>我们坚持让您的设计与众不同</span>

            </div>
            <div :class="['six',pic_b_flag?'pic_b_ac':'']">
              <div class="one_t">
                <div class="pic_lia" style="width:26px">
                  <img class="on" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/06_06.png" alt />
                  <img class="tw" src="https://jingye.oss-cn-qingdao.aliyuncs.com/hme/06.png" alt />
                </div>
                <div class="pic_p"></div>
                <p>完善的服务体系</p>

                <div class="a_line"></div>
              </div>
              <span>确保每一个项目从制作到验收，再到售后服务，我们早已经轻车熟路进行</span>

            </div>
          </div>

          <!-- <ul class="clearfix">
            <li class="advantage_l">
              <div class="advantage_one">
                优势
                <span>一</span>
              </div>
              <div class="advantage_one_m">
                <h4>免费专属服务</h4>
                <p>资深产品经理1对1进行全面需 求分析并制定解决方案</p>
              </div>
            </li>
            <li class="advantage_r">
              <div class="advantage_one">
                优势
                <span>四</span>
              </div>
              <div class="advantage_one_m">
                <h4>高效团队协作</h4>
                <p>公司成立之初到至今，核心团队从未发生变 化，高效早已经是我们的标签</p>
              </div>
            </li>
            <li class="advantage_l">
              <div class="advantage_one">
                优势
                <span>二</span>
              </div>
              <div class="advantage_one_m">
                <h4>坚持原创设计理念</h4>
                <p>我们坚持让您的设计与众不同</p>
              </div>
            </li>
            <li class="advantage_r">
              <div class="advantage_one">
                优势
                <span>五</span>
              </div>
              <div class="advantage_one_m">
                <h4>高标准开发流程</h4>
                <p>项目开发严格按照产品研发标准 进行</p>
              </div>
            </li>
            <li class="advantage_l">
              <div class="advantage_one">
                优势
                <span>三</span>
              </div>
              <div class="advantage_one_m">
                <h4>只为更好的用户体验</h4>
                <p>定制交互设计，结合用户习惯 及页面美感来设计交互</p>
              </div>
            </li>
            <li class="advantage_r">
              <div class="advantage_one">
                优势
                <span>六</span>
              </div>
              <div class="advantage_one_m">
                <h4>完善的服务体系</h4>
                <p>确保每一个项目从制作到验收， 再到售后服务，我们早已经轻车熟路</p>
              </div>
            </li>
          </ul>-->
          <!-- <div class="line line_one"></div>
          <div class="line line_two"></div>
          <div class="line line_three"></div>
          <div class="line line_four"></div>
          <div class="line line_five"></div>
          <div class="line line_six"></div>-->
        </div>
      </div>
    </div>
    <!-- 提升品牌价值 -->
    <div :class="['brand',brand_flag?'brand_active':'']">
      <div class="brand_top">
        <h2>只为用户提升品牌价值</h2>
        <p>我们的用户正在使用科技改变世界</p>
      </div>
      <!-- 内容区 -->
      <div class="brand_con">
        <div class="brand_c_t">
          <div class="brand_c_t_l">
            <div class="brand_c_t_p">
              <div class="pic">
                <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/al01-2.png" alt /> -->
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/anli01.png" alt />
              </div>
              <div class="bg" @click="toexample">
                <h6>多威商城定制</h6>
                <div class="line"></div>
                <span>多威定制是一款小而美的C2M的商城项目。平台要求定制的产品展示科技化，选择多样化，定制个性化!</span>
                <!-- <span>
                <div class="line_o"></div>
                <div class="line_t"></div>
                </span>-->
              </div>
            </div>
            <div class="brand_bottom">
              <div class="brand_c_t_w">
                <span>多威商城定制</span>
                <span>|</span>
                <span>公众号</span>
              </div>
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/fk/hwx2.png" alt=""> -->
            </div>
          </div>
          <div class="brand_c_t_r">
            <div class="brand_c_t_p">
              <div class="pic">
                <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/al02-2.png" alt /> -->
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/anli02.png" alt />
              </div>
              <div class="bg" @click="toexample">
                <h6>一块跑APP定制</h6>
                <div class="line"></div>
                <span>一块跑app专为爱好跑步的用户提供了丰富的跑步活动,用户可在线报名赛事活动，一块跑致力于跑推动跑团管理进步！</span>
              </div>
            </div>
            <div class="brand_bottom">

              <div class="brand_c_t_w">
                <span>一块跑APP定制</span>
                <span>|</span>
                <span>APP开发</span>
              </div>
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/fk/happ.png" alt=""> -->
            </div>
          </div>
        </div>
        <div :class="['brand_c_b',brand_b_flag?'brand_c_b_active':'']">
          <ul>
            <li>
              <div class="pic">
                <div class="pic_p">
                  <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/al04-2.png" alt /> -->
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/anli03.png" alt />
                </div>
                <div class="bg" @click="toexample">
                  <h6>亿丁狗商城定制</h6>
                  <div class="line"></div>
                  <span>亿丁狗(英文Edding Dog)买卖管理系统是专业的P2R2C商务平台!</span>
                  <!-- <span>
                  <div class="line_o"></div>查看项目
                  <div class="line_t"></div>
                  </span>-->
                </div>
                <div class="brand_bottom">

                  <div class="brand_c_t_w">
                    <span>亿丁狗商城定制</span>
                    <span>|</span>
                    <span>小程序开发</span>
                  </div>
                  <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/fk/hwx.png" alt=""> -->
                </div>
              </div>
            </li>
            <li>
              <div class="pic">
                <div class="pic_p">
                  <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/al03-2.png" alt /> -->
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/homebrand2.jpg" alt />
                </div>
                <div class="bg" @click="toexample">
                  <h6>味家生活APP</h6>
                  <div class="line"></div>
                  <span>味家生鲜配送app,专业的电商App制作平台，为您提供在家就可以买菜的平台...</span>
                  <!-- <span>
                  <div class="line_o"></div>查看项目
                  <div class="line_t"></div>
                  </span>-->
                </div>
                <div class="brand_bottom">

                  <div class="brand_c_t_w">
                    <span>味家生活APP</span>
                    <span>|</span>
                    <span>APP开发</span>
                  </div>
                  <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/fk/happ.png" alt=""> -->
                </div>
              </div>
            </li>
            <li>
              <div class="pic">
                <div class="pic_p">
                  <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/al03-2.png" alt /> -->
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/homebrand3.jpg" alt />
                </div>
                <div class="bg" @click="toexample">
                  <h6>梨多宝网站开发</h6>
                  <div class="line"></div>
                  <span>梨多宝自有180亩深加工基地。主营范围包含鲜果深加工、生态农业休闲旅游与进出口业务!</span>
                  <!-- <span>
                  <div class="line_o"></div>查看项目
                  <div class="line_t"></div>
                  </span>-->
                </div>
                <div class="brand_bottom">

                  <div class="brand_c_t_w">
                    <span>梨多宝网站开发</span>
                    <span>|</span>
                    <span>网站建设</span>
                  </div>
                  <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/fk/hweb.png" alt=""> -->
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!--查看更多 -->
        <!-- <div class="more" @click="toexample">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/btn.png" alt="">
          <span>查看更多</span>
        </div> -->
      </div>
    </div>
    <!-- 量身定制的流程 -->
    <div :class="['process',process_flag?'process_active':'']">
      <div class="process_top">
        <h2>这里有为您量身定制的流程</h2>
        <p>严苛、严谨、专业、负责的制作流程</p>
      </div>
      <div :class="['process_bot',process_bot_flag?'process_bot_active':'']">
        <ul>
          <li>
            <div class="zc"></div>
            <div class="co">
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/lc/icon01.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/1.png" alt />
              <div class="ccc">
                <span>01</span>
                <span class="sp">-</span>
                <span>需求沟通</span>
              </div>
            </div>
          </li>
          <li>
            <div class="zc"></div>
            <div class="co">
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/lc/icon02.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/2.png" alt />

              <span>02 - 提交策案</span>
            </div>
          </li>
          <li>
            <div class="zc"></div>
            <div class="co">
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/lc/icon03.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/3.png" alt />

              <span>03 - 签订合同</span>
            </div>
          </li>
          <li>
            <div class="zc"></div>
            <div class="co">
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/lc/icon04.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/4.png" alt />

              <span>04 - 原型设计</span>
            </div>
          </li>
          <li>
            <div class="zc"></div>
            <div class="co">
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/lc/icon05.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/5.png" alt />
              <span>05 - ui设计</span>
            </div>
          </li>
          <li>
            <div class="zc"></div>
            <div class="co">
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/lc/icon06.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/6.png" alt />

              <span>06 - 技术开发</span>
            </div>
          </li>
          <li>
            <div class="zc"></div>
            <div class="co">
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/lc/icon07.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/7.png" alt />
              <span>07 - 测试优化</span>
            </div>
          </li>
          <li>
            <div class="zc"></div>
            <div class="co">
              <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/lc/icon08.png" alt /> -->
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/8.png" alt />
              <span>08 - 上线交付</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 想法与焦点 -->
    <div :class="['idea',idea_flag?'idea_active':'']">
      <div class="idea_top">
        <h2>将想法与焦点与您一起共享</h2>
        <p>随时随地与您分享互联网行业信息</p>
      </div>
      <ul :class="ideaUl_flag?'ideaul_active':''">
        <li @click="tonews(8)">
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/idea1.jpg" alt />
          </div>
          <div class="bk">
            <div class="wz">
              <h5>H5运营推广时所碰到的问题你解决了吗???</h5>
              <div class="date">2019-09-10</div>
              <p>
                一到活动节点，领导就规定做互联网媒体宣扬，除了微博
                、微信帖还有其他新方式吗？对了做个H5宣扬页吧...
              </p>
            </div>
            <div class="jt">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/jt02-2.png" alt />
              <span>View</span>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li @click="tonews(7)">
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/idea2.jpg" alt />
          </div>
          <div class="bk">
            <div class="wz">
              <h5>合肥景烨网络有限公司正式上线啦！</h5>
              <div class="date">2019-09-10</div>
              <p>
                合肥景烨网络科技有限公司（简称景烨网络）成立于2015
                年，是一家专注于互联网高新技术研究、开发...
              </p>
            </div>
            <div class="jt">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/jt02-2.png" alt />
              <span>View</span>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li @click="tonews(9)">
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/idea3.jpg" alt />
          </div>
          <div class="bk">
            <div class="wz">
              <h5>5G的美好时代,互联网网页再创巅峰</h5>
              <div class="date">2019-09-10</div>
              <p>
                5G的网络速度是4G的11.2倍，您在4G网络下半小时才能下
                载的大型游戏和视频文件，在5G网络下...
              </p>
            </div>
            <div class="jt">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/jt02-2.png" alt />
              <span>View</span>
            </div>
          </div>
          <div class="line"></div>
        </li>
      </ul>
      <!-- 更多 -->
      <div class="more" @click="toidea">
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/btn.png" alt="">
        <span>查看更多</span>
      </div>
    </div>
    <!-- 行业大咖 -->
    <div :class="['h_bigShot',bigShot_flag?'h_bigShot_active':'']">
      <div class="h_bigShot_top">
        <h2>有哪些行业大咖选择我们</h2>
        <p>我们追求完美的创意设计和用户体验，更关注您的满意</p>
      </div>
      <div :class="['container',big_cflag?'bgc_c_active':'']">
        <div class="container_l"></div>
        <ul class="container_r">
          <li>
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/hz-sh02.png" alt /> -->
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo01.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo02.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo03.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo04.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo05.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo06.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo07.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo08.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo09.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo10.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo11.png" alt />
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo12.png" alt />
          </li>
        </ul>
      </div>
    </div>

    <!-- 移动端 -->
    <!-- 提升品牌价值 -->
    <div class="mbrand clearfix">
      <div class="mbrand_top">
        <h2>只为用户提升品牌价值</h2>
        <p>我们的用户正在使用科技改变世界</p>
      </div>
      <ul>
        <li @click="toexa(3)">
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jz01-2.png" alt /> -->
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homem/11.png" alt /> -->
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/21.png" alt="">
          <div class="wz">
            <span>多威商城定制</span>
            <span>|</span>
            <span>公众号</span>
          </div>
        </li>
        <li @click="toexa(8)">
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jz01-2.png" alt /> -->
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homem/12.png" alt /> -->
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/22.png" alt="">

          <div class="wz">
            <span>一块跑APP定制</span>
            <span>|</span>
            <span>APP开发</span>
          </div>
        </li>
        <li @click="toexa(7)">
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jz01-2.png" alt /> -->
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homem/13.png" alt /> -->
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/23.png" alt="">

          <div class="wz">
            <span>亿丁狗商城定制</span>
            <span>|</span>
            <span>小程序开发</span>
          </div>
        </li>
      </ul>
      <div class="more" @click="toexample">
        <span>查看更多</span>
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
      </div>
    </div>
    <!-- 将想法与焦点与您一起共享 -->
    <div class="mPublic clearfix">
      <div class="mPublic_top">
        <h2>将想法与焦点与您一起共享</h2>
        <p>随时随地与您分享互联网行业信息</p>
      </div>
      <!-- <div class="mBanner_more">
        <swiper :options="swiperOption2" ref="mySwiper">
          <swiper-slide>
            <div class="mPublic_content">
              <div class="pic"></div>
              <div class="bot">
                <span>H5运营推广时所碰到的问题你解决了吗???</span>
                <span>2019-09-10</span>
                <p>一到活动节点，领导就规定做互联网媒体宣扬，除了微博
                  、微信帖还有其他新方式吗？对了做个H5宣扬页吧...</p>
                <div class="more">
                  <span>查看更多</span>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
                </div>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="mPublic_content">
              <div class="pic"></div>
              <div class="bot">
                <span>合肥景烨网络有限公司正式上线啦！</span>
                <span>2019-09-10</span>
                <p>合肥景烨网络科技有限公司（简称景烨网络）成立于2015
                  年，是一家专注于互联网高新技术研究、开发...</p>
                <div class="more">
                  <span>查看更多</span>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
                </div>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="mPublic_content">
              <div class="pic"></div>
              <div class="bot">
                <span>5G的美好时代,互联网网页再创巅峰</span>
                <span>2019-09-10</span>
                <p>5G的网络速度是4G的11.2倍，您在4G网络下半小时才能下
                  载的大型游戏和视频文件，在5G网络下...</p>
                <div class="more">
                  <span>查看更多</span>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
                </div>
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>-->
      <div class="mBanner_bot">
        <swiper :options="swiperOptionbot" ref="mySwiperhome">
          <swiper-slide>
            <div class="mbanner_con">
              <div class="pic pic_o"></div>
              <div class="bot" @click="tonews(8)">
                <span>H5运营推广时所碰到的问题你解决了吗???</span>
                <span>2019-09-10</span>
                <p>
                  一到活动节点，领导就规定做互联网媒体宣扬，除了微博
                  、微信帖还有其他新方式吗？对了做个H5宣扬页吧...
                </p>
                <!-- <div class="more" @click="tonews(8)">
                  <span>查看更多</span>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
                </div> -->
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="mbanner_con">
              <div class="pic pic_tw"></div>
              <div class="bot" @click="tonews(7)">
                <span>合肥景烨网络有限公司正式上线啦！</span>
                <span>2019-09-10</span>
                <p>
                  合肥景烨网络科技有限公司（简称景烨网络）成立于2015
                  年，是一家专注于互联网高新技术研究、开发...
                </p>
                <!-- <div class="more" @click="tonews(7)">
                  <span>查看更多</span>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
                </div> -->
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="mbanner_con">
              <div class="pic pic_th"></div>
              <div class="bot" @click="tonews(9)">
                <span>5G的美好时代,互联网网页再创巅峰</span>
                <span>2019-09-10</span>
                <p>
                  5G的网络速度是4G的11.2倍，您在4G网络下半小时才能下
                  载的大型游戏和视频文件，在5G网络下...
                </p>
                <!-- <div class="more" @click="tonews(9)">
                  <span>查看更多</span>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
                </div> -->
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <!-- <div class="contact-box" :style="'bottom:'+ contact_height +'px'" v-if="contact_height > 0">
      <contact @backTops="backTop" @scroll="scrollm"></contact>
    </div>-->
    <!-- 回到顶部 -->
    <!-- <div class="m_toTop"></div> -->
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import contact from '../Components/contact'

export default {
  components: {
    swiper,
    swiperSlide,
    contact
  },
  data() {
    return {
      ul_flag: false, //流程下
      brand_b_flag: false, //品牌价值下
      wContentone: false,
      wContenttwo: false,
      wContentthree: false,
      wContentfour: false,
      bigShot_flag: false, // 大咖选择滚动特效
      big_cflag: false, // 大咖下 特效
      ideaUl_flag: false, //想法与焦点下 下特效
      idea_flag: false, // 想法与焦点特效
      brand_flag: false, //品牌价值特效
      choose_flag: false, // 选择特效
      choose_o_flag: false, // 选择内容的特效
      pic_b_flag: false, // 优势忒笑傲
      wecan_flag: false, // 我们能做什么的特效
      we_t_flag: false, // 我们能做什么 上
      process_flag: false,
      process_bot_flag: false, // 流程下
      scroll: 0,
      banner: { pc: [], mobile: [] },
      banner_index: 0,
      contact_height: 0,
      menu: [
        { name: '首页', url: '/index/index' },
        { name: '服务', url: '/index/fuwu/website' },
        { name: '案例', url: '/index/example' },
        { name: '社区', url: '/index/news' },
        { name: '关于景烨', url: '/index/about' }
      ],
      menu_index: 0,
      menu_show: false,
      path: '',
      bn: false,
      swiperOption: {
        notNextTick: true,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        autoplayDisableOnInteraction: true,
        paginationClickable: true,
        // pagination: {
        //   el: '.swiper-pagination'
        //   // paginationType: 'custom'
        // },
        navigation: {
          //最新版本的需要这样配置，按钮才有效
          prevEl: '.swiper-button-prev', //上一张
          nextEl: '.swiper-button-next' //下一张
        },
        mousewheelControl: true,
        observeParents: true
      },
      swiperOptionbot: {
        notNextTick: true,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: {
          el: '.swiper-pagination',
          paginationType: 'custom'
        },

        // pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      },
      swiperOption2: {
        notNextTick: true,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        autoplayDisableOnInteraction: true,
        paginationClickable: true,
        pagination: {
          el: '.swiper-pagination',
          paginationType: 'custom'
        },
        navigation: {
          //最新版本的需要这样配置，按钮才有效
          prevEl: '.swiper-button-prev', //上一张
          nextEl: '.swiper-button-next' //下一张
        },
        mousewheelControl: true,
        observeParents: true
      },
      banner_active: false,
      todown: false,
      index_right: false // 控制导航侧边栏的显示隐藏
    }
  },
  mounted() {
    // this.banner_back();
    this.scrollm
    this.getData()
    this.getMenuIndex()
    window.addEventListener('scroll', this.handleScroll, true)
    setInterval(() => {
      this.bannerChange(2)
    }, 10000)
    this.changebg(1)
  },
  watch: {
    ul_flag(val, o) {
      // console.log(val, o);
      if (val == true)
        setTimeout(() => {
          this.process()
        }, 3000)
      // if (val == false) this.process_f()
    }
  },
  updated() {
    this.bannerto()
  },
  methods: {
    // 手机端跳转到案例
    toexa(key) {
      switch (key) {
        case 3:
          this.$router.push('/index/example/detail/' + 3)
          break
        case 8:
          this.$router.push('/index/example/detail/' + 8)
          break
        case 7:
          this.$router.push('/index/example/detail/' + 7)
          break

        default:
          break
      }
    },
    // 跳转到对应的服务页
    toser(key) {
      switch (key) {
        case 1:
          this.$router.push('/index/fuwu/website')
          break
        case 2:
          this.$router.push('/index/fuwu/wechat')
          break
        case 3:
          this.$router.push('/index/fuwu/app')
          break
        case 4:
          this.$router.push('/index/fuwu/vr')
          break

        default:
          break
      }
    },
    // 我们能作什么默认特效
    changebg(key) {
      switch (key) {
        case 1:
          this.wContentone = true
          this.wContenttwo = false
          this.wContentthree = false
          this.wContentfour = false
          break
        case 2:
          this.wContentone = false
          this.wContenttwo = true
          this.wContentthree = false
          this.wContentfour = false
          break
        case 3:
          this.wContentone = false
          this.wContenttwo = false
          this.wContentthree = true
          this.wContentfour = false
          break
        case 4:
          console.log(3)
          this.wContentone = false
          this.wContenttwo = false
          this.wContentthree = false
          this.wContentfour = true
          break
        default:
          break
      }
    },
    // 跳转到idea
    toidea() {
      this.$router.push('/index/news/index')
    },
    // 跳转到新闻
    tonews() {
      this.$router.push('detal' + 9)
    },
    // 轮播图上移
    bannerto() {
      var bannero = document.getElementsByClassName('index-banners')[0]

      // setTimeout(() => {
      if (bannero) {
        // console.log(bannero, "1111");
        bannero.style.top = 0
      }
      this.banner_active = true
      this.todown = true
      // }, 500)
      setTimeout(() => {
        this.index_right = true
      }, 1500)
      // var toDown_active = document.getElementsByClassName("toDown_active")[0];
      // eslint-disable-next-line no-undef
      // toDown_active.style.top = 0;
    },
    // 跳转到新闻
    tonews(key) {
      switch (key) {
        case 9:
          this.$router.push('/index/news/detail/' + 9)
          break
        case 8:
          this.$router.push('/index/news/detail/' + 8)
          break
        case 7:
          this.$router.push('/index/news/detail/' + 7)
          break

        default:
          break
      }
    },
    // 跳转到案例
    toexample() {
      this.$router.push('/index/example/index')
      // console.log(111)
    },
    // 计算滚动距离的方法
    scrollm(data) {
      // this.scroll = data
      // console.log(data);
    },
    slideChangeTransitionEnd(e) {
      let swiper = this.$refs.mySwiper_banner.swiper
      // console.log(swiper.realIndex, "swiper");
      this.banner_index = swiper.realIndex
    },
    bannerChange(e) {
      var len = this.banner.pc.length
      let swiper = this.$refs.mySwiper_banner.swiper

      if (e == 1) {
        if (this.banner_index == 0) {
          this.banner_index = len - 1
        } else {
          this.banner_index--
        }
        swiper.slidePrev()
      } else {
        if (this.banner_index == len - 1) {
          this.banner_index = 0
        } else {
          this.banner_index++
        }
        swiper.slideNext()
      }
      swiper.realIndex = this.banner_index
    },
    changeBannerStyle() {
      var width = document.body.clientWidth - 80
      return 'margin-left:-' + this.banner_index * width + 'px'
    },
    changeSlide(key) {
      var swiper = this.$refs.mySwiper_banner.swiper
      swiper.slideToLoop(key, 1000, false) //切换到第一个slide，速度为1秒
      this.banner_index = key
      this.bannerChange(2)
    },
    //获取轮播图
    getData() {
      this.ajaxs('index/index', {
        success: res => {
          this.banner = res.msg.index
          //this.bannerto();
        }
      })
    },
    handleScroll(e) {
      this.scroll = this.scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop // 执行代码
      if (this.scrollTop > 100) {
        this.we_t_flag = true

        this.contact_height = 80
        this.wecan_flag = true
      } else {
        this.contact_height = 0
      }
      // console.log(this.scroll)
      //  选择我们的特效
      if (this.scroll > 700) {
        this.choose_flag = true
        this.choose_o_flag = true
        setTimeout(() => {
          this.pic_b_flag = true
        }, 1000)
      }
      // if (this.scroll > 900) {
      //   this.choose_o_flag = true
      // }
      // 提升品牌价值 特效
      if (this.scroll > 1700) {
        this.brand_flag = true
      }
      // 品牌价值下
      if (this.scroll > 2300) {
        this.brand_b_flag = true
      }
      if (this.scroll > 2800) {
        this.process_flag = true
      }
      // 流程下特效
      if (this.scroll > 3000) {
        this.ul_flag = true
        this.process_bot_flag = true
      }
      // 想法与焦点特效
      if (this.scroll > 3700) {
        this.idea_flag = true
      }
      // 想法与焦点下特效

      if (this.scroll > 3800) {
        this.ideaUl_flag = true
      }
      if (this.scroll > 4500) {
        this.bigShot_flag = true
      }
      if (this.scroll > 4700) {
        this.big_cflag = true
      }
      // console.log(this.scroll);
      // this.choose_advan(this.scroll);
      // this.process(this.scroll);
    },
    // 量身定制的流程动画效果
    process_f() {
      var processo = document.getElementsByClassName('processo')[0]
      var processt = document.getElementsByClassName('processo')[1]
      var processth = document.getElementsByClassName('processo')[2]
      var processfo = document.getElementsByClassName('processo')[3]
      var processfi = document.getElementsByClassName('processo')[4]
      var processs = document.getElementsByClassName('processo')[5]
      var processse = document.getElementsByClassName('processo')[6]
      var processei = document.getElementsByClassName('processo')[7]
      processo.style.top = 0
      processfi.style.top = 0
      setTimeout(() => {
        processt.style.top = 0
        processs.style.top = 0
      }, 400)
      setTimeout(() => {
        processth.style.top = 0
        processse.style.top = 0
      }, 800)
      setTimeout(() => {
        processfo.style.top = 0
        processei.style.top = 0
      }, 1000)
    },
    process() {
      var processo = document.getElementsByClassName('processo')[0]
      var processt = document.getElementsByClassName('processo')[1]
      var processth = document.getElementsByClassName('processo')[2]
      var processfo = document.getElementsByClassName('processo')[3]
      var processfi = document.getElementsByClassName('processo')[4]
      var processs = document.getElementsByClassName('processo')[5]
      var processse = document.getElementsByClassName('processo')[6]
      var processei = document.getElementsByClassName('processo')[7]
      processo.style.top = 48 + 'px'
      processfi.style.top = -43 + 'px'
      setTimeout(() => {
        processt.style.top = 48 + 'px'
        processs.style.top = -43 + 'px'
      }, 300)
      setTimeout(() => {
        processth.style.top = 48 + 'px'
        processse.style.top = -43 + 'px'
      }, 300)
      setTimeout(() => {
        processfo.style.top = 48 + 'px'
        processei.style.top = -43 + 'px'
      }, 300)
    },
    //  优势
    choose_advan(scroll) {
      var chooseo = document.getElementsByClassName('advantage_l')[0]
      var choosetw = document.getElementsByClassName('advantage_l')[1]
      var chooseth = document.getElementsByClassName('advantage_l')[2]
      var choosef = document.getElementsByClassName('advantage_r')[0]
      var choosefi = document.getElementsByClassName('advantage_r')[1]
      var chooses = document.getElementsByClassName('advantage_r')[2]
      if (scroll > 900) {
        setTimeout(() => {
          chooseo.style.left = 0
          choosef.style.right = 0
        }, 1500)
        setTimeout(() => {
          choosetw.style.left = 0
          choosefi.style.right = 0
        }, 1500)
        setTimeout(() => {
          chooseth.style.left = 0
          chooses.style.right = 0
        }, 1500)
      }
    },
    backTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 30)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 页面返回原来的位置
    banner_back() {
      var banner = document.getElementsByClassName('banner')[0]
      banner.style.right = 0
    },
    on_top_enter() {
      this.$refs.mySwiper.swiper.autoplay.stop()
    },
    on_top_leave() {
      this.$refs.mySwiper.swiper.autoplay.start()
    },
    //获取menu_index
    getMenuIndex() {
      var router = window.location.pathname
      router = router.split('/')
      var router_len = router.length
      router.splice(router_len - 1, 1)
      router = router.join('/')
      for (var i in this.menu) {
        if (this.menu[i].url.indexOf(router) != -1) {
          this.menu_index = i
        }
      }
      this.menu_show = true
    },
    //设置底部横线的样式
    setLineStyle() {
      //console.log(this.$refs["menu" + this.menu_index][0].offsetWidth)
      var width = this.$refs['menu' + this.menu_index][0].offsetWidth
      var len = 0
      for (var i in this.menu) {
        if (i < this.menu_index) {
          len += this.$refs['menu' + i][0].offsetWidth
        }
      }
      len += (width - 77) / 2
      return 'left:' + len + 'px'
    },
    //改变路由时触发
    changeRouter(key) {
      this.menu_index = key
      this.path = this.$router.path
    }
  }
}
</script>

<style scoped >
@import url('../../assets/css/index/index.css');
@import url('../../assets/css/index/mIndex.css');
@import url('../../assets/css/index/head.css');
</style>